<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  computed: {
    // 使用计算属性处理 legend 的 data
    legendData() {
      return this.chartData.legendData || [];
    },
    xAxisData() {
      return this.chartData.xAxisData || [];
    },
    yAxisAll(){
      return this.chartData.yAxisAll || [];
    },
    lineAndPieSeries() {
      return this.chartData.lineAndPieSeries || [];
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newData) {
        this.$nextTick(() => {
          this.initChart();
        });
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      try {
        this.chart = echarts.init(this.$el,'macarons');
        const chartOptions = this.generateChartOptions();
        this.chart.setOption(chartOptions);
      } catch (error) {
        console.error('初始化图表时出错:', error);
      }
    },
      // this.chart.setOption({
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b} : {c} ({d}%)'
      //   },
      //   legend: {
      //     left: 'center',
      //     bottom: '10',
      //     data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
      //   },
      //   series: [
      //     {
      //       name: 'WEEKLY WRITE ARTICLES',
      //       type: 'pie',
      //       roseType: 'radius',
      //       radius: [15, 95],
      //       center: ['50%', '38%'],
      //       data: [
      //         { value: 320, name: 'Industries' },
      //         { value: 240, name: 'Technology' },
      //         { value: 149, name: 'Forex' },
      //         { value: 100, name: 'Gold' },
      //         { value: 59, name: 'Forecasts' }
      //       ],
      //       animationEasing: 'cubicInOut',
      //       animationDuration: 2600
      //     }
      //   ]
      // })
      generateChartOptions() {
        return {
        tooltip: {
        trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          // data: [ '总营收（元）', '总成本（元）', '总利润（元）']
          data: this.legendData
        },
        xAxis: [
          {
            type: 'category',
            // data: ["2024 年 4 月","2024 年 5 月","2024 年 6 月","2024 年 7 月","2024 年 8 月","2024 年 9 月","2024 年 10 月","2024 年 11 月","2024 年 12 月","2025 年 1 月","2025 年 2 月","2025 年 3 月"],
            data: this.xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: this.yAxisAll,
        series: this.lineAndPieSeries,
        // yAxis: [
        //   {
        //     type: 'value',
        //     name: '总营收（元）',
        //     data: [115000,119100,125000,139100,145000,130900,125000,115000,135000,130900,119100,139100],
        //     axisPointer: {
        //       type: 'shadow'
        //     }
        //     // min: 0,
        //     // max: 250,
        //     // interval: 50,
        //     // axisLabel: {
        //     //   formatter: '{value} ml'
        //     // }
        //   },
        //   {
        //     type: 'value',
        //     name: '总成本（元）',
        //     data: [38000,40000,39500,42500,43000,41000,40500,38500,42000,41500,39000,43500]
        //   }
        // ],
        // series: [
        //   {
        //     name: '总营收（元）',
        //     type: 'bar',
        //     data: [115000,119100,125000,139100,145000,130900,125000,115000,135000,130900,119100,139100]
        //   },
        //   {
        //     name: '总成本（元）',
        //     type: 'bar',
        //     data: [38000,40000,39500,42500,43000,41000,40500,38500,42000,41500,39000,43500]
        //   },
        //   {
        //     name: '总利润（元）',
        //     type: 'line',
        //     yAxisIndex: 1,
        //     data: [77000,79100,85500,96600,102000,89900,84500,76500,93000,89400,80100,95600]
        //   }
        // ]
      }
    }
  }
}
</script>
